<template>
	<view>
		<!-- <view class="cu-bar tabbar">
      </view> -->
		<view v-if="tabList.length>0" class="cu-bar tabbar bg-white shadow foot" style="height:120upx;">
			<view :class="index==tcNum?'action add-action':'action'" v-for="(tab,index) in tabList" @click="tabChange"
				:data-url="tab.url" :data-jumpType="tab.jumpType" :data-num="index" :key="index">
				<view v-if="index!=tcNum" class="cuIcon-cu-image">
					<image v-if="curTab==index" :src="tab.iconCheck" mode="aspectFit"></image>
					<image v-else :src="tab.icon" mode="aspectFit"></image>
					<view v-if="tab.badge > 0" class="cu-tag badge">{{tab.badge}}</view>
				</view>
				<view v-else class="cuIcon-cu-image"  style="width: 150upx !important;height: 130upx !important;top: -70upx !important;border-radius: 50% !important;">
					<image v-if="curTab==index" :src="tab.iconCheck" mode="aspectFit" style="width: 130upx !important;height: 130upx !important;border-radius: 50% !important;"></image>
					<image v-else :src="tab.icon" mode="aspectFit" style="width: 130upx !important;height: 130upx !important;border-radius: 50% !important;"></image>
					<view v-if="tab.badge > 0" class="cu-tag badge">{{tab.badge}}</view>
				</view>
				<view class="base-font-24" style="margin-top:15upx;" :class="curTab==index?'text-000':'text-333'">
					{{tab.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/utils/api.js';
	import util from '@/utils/util.js';
	export default {
		name: 'bar',
		data() {
			return {
				tabList: [],
				curTab: 0,
				tcNum:9,//突出的按钮
			}
		},
		props: {
			tab: {
				type: Number,
				default () {
					return 0;
				}
			}
		},
		mounted() {
			this.tabList = api.getStorageData("menu_nav_list");
			let num = api.getStorageData("menu_nav_tab")
			if (util.isNotEmpty(num)) {
				this.curTab = num;
			}
			this.initData();
		},
		methods: {
			initData() {
				let _self = this;
				api.wxMenuList({
					type: 1,
				}).then(res => {
					let tabLists = [];
					res.data.forEach(obj => {
						tabLists.push({
							name: obj.title,
							icon: obj.image,
							iconCheck: obj.checkImage,
							url: obj.url,
							jumpType: obj.jumpType,
							badge: 0
						});
					})
					_self.tabList = tabLists;
					api.setStorageData("menu_nav_list", _self.tabList);
				});
			},
			tabChange: function(e) {
				var jumpType = e.currentTarget.dataset.jumptype;
				api.setStorageData("menu_nav_tab", e.currentTarget.dataset.num);
				if (jumpType == 1) {
					uni.redirectTo({
						url: e.currentTarget.dataset.url,
					})
				} else {
					uni.navigateTo({
						url: e.currentTarget.dataset.url,
					})
				}
			}
		}
	}
</script>

<style>
	/* .cu-bar.tabbar .action {font-size:23upx;} */
	.cu-bar.tabbar .action .cuIcon-cu-image {
		text-align: center;
		width: 34upx;
		height: 34upx;
	}

	.cu-bar.tabbar .action .cuIcon-cu-image image {
		width: 34upx;
		height: 34upx;
		vertical-align: middle;
	}
</style>